<!--
  分类与检索

  props：
    options array 分类选项 参数示例：https://youzan.github.io/vant/v2/#/zh-CN/dropdown-menu#option-shu-ju-jie-gou
    (不传可以只显示搜索框)
    placeholder string 提示语

  event:
    search 搜索事件 键盘回车或点击右侧icon
    change 下拉框选中变化
-->
<template>
    <f7-block class="search-box">
        <div class="left" v-if="isShowDropdown">
            <van-dropdown-menu>
                <van-dropdown-item :options="options" v-model="active" @change="onDrpodownChange"></van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="right">
            <van-search v-show="active != selectIndex" shape="round" :placeholder="placeholder" v-model="searchVal"
                @search="onSearch">
                <template #left-icon>
                    <div style="display:none"></div>
                </template>
                <template #right-icon>
                    <!-- <van-icon name="search" @click="() => onSearch(searchVal)"></van-icon> -->
                    <img src="static/img/list/search.svg" alt="search" width="17">
                </template>
            </van-search>
            <van-field class="selectBox" v-show="active == selectIndex" v-model="searchVal" readonly>
                <div slot="input" class="input-cell">
                    <v-picker-div placeholder="请选择" :columns="selectList" @confirm="onChange" code="code"
                        :defCheck="searchVal">
                    </v-picker-div>
                </div>
            </van-field>
        </div>
    </f7-block>
</template>

<script>
import { DropdownMenu, DropdownItem, Search, Icon } from "vant"
export default {
    name: "qm-classified-retrieval",
    components: {
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [Search.name]: Search,
        [Icon.name]: Icon,
    },
    props: {
        options: {
            type: Array,
            default: () => [
                // { text: "全部", value: 0 },
                // { text: "全部", value: 1 },
                // { text: "全部", value: 2 }
            ]
        },
        placeholder: {
            type: String,
            default: "搜索关键词"
        },
        selectIndex: {
            type: Number,
            default: -1,
        },
        selectList: {
            type: Array,
            default: () => []
        }
    },
    data () {
        return {
            active: 0,
            searchVal: ""
        }
    },
    computed: {
        isShowDropdown () {
            return !!this.options.length
        }
    },
    methods: {
        onSearch (value) {
            this.$emit("search", value);
        },
        onChange (data, index) {
            this.$emit("search", data.data.code);
        },
        onDrpodownChange (value) {
            this.$emit("change", value);
        }
    }
}
</script>

<style lang="less" scoped>
.search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: calc(30px * var(--ratio)) calc(22px * var(--ratio));
    background-color: #fff;
    z-index: 2;

    .left {
        flex: 0 0 24%;

        ::v-deep .van-dropdown-menu__bar {
            box-shadow: none;
            height: auto;

            .van-dropdown-menu__item {
                justify-content: flex-start;
            }

            .van-dropdown-menu__title {
                font-size: var(--font-size-maincontent);
                color: #61677A;

                &::after {
                    border-color: transparent transparent #61677A #61677A;
                }
            }
        }
    }

    .right {
        flex: 1 0 76%;

        .selectBox {
            background-color: #f7f8fa;
            padding: 5px 15px;
            border-radius: 999px;

            .input-cell {
                width: 100%;

                ::v-deep .van-cell {
                    background-color: #f7f8fa;
                }
            }
        }

        ::v-deep .van-search {
            padding: 0;

            .van-search__content {
                padding-left: calc(30px * var(--ratio));
            }

            .van-cell {
                padding: calc(15px * var(--ratio)) calc(21px * var(--ratio)) calc(15px * var(--ratio)) 0;
                font-size: var(--font-size-subcontent);
                line-height: calc(40px * var(--ratio));

                input[type="search"] {
                    &::placeholder {
                        color: #B9C1CD;
                    }
                }
            }

            .van-field__right-icon {
                line-height: 1;
            }
        }
    }
}

::v-deep {
    .van-dropdown-item__option--active {
        color: var(--color-brand);

        .van-dropdown-item__icon {
            color: var(--color-brand);
        }
    }
}
</style>
